<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">使用帮助</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>

		<view class="layout" v-show="!showLoading">
			
			<!-- helpitem -->
				<view class="helpitem" v-for="item in helpinfo" :key="item.id" @click="goToHelpDetail(item)">
					<!-- 左边图片 -->
					<!-- <view class="helpbox">
						<image :src="item.image" mode=""></image>
					</view> -->
					
					<!-- 内容标题 -->
					<view class="help-mian">
						<view class="helptitle">{{ item.title }}</view>
						
						<view class="helpcontent">{{ item.content }}</view>
					</view>
				</view>

		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import {
		loadingType
	} from '@/utils/type';
	export default {
		data() {
			return {
				helpinfo:{
					title:'',
					image:'',
					content:''
				}
			}
		},
		mounted() {
			this.getHelp()
		},
		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			getHelp() {
				const _this = this
				uni.request({
					url: request.baseUrl + 'p-help',
					method: 'GET',
					success(res) {
						console.log("帮助", res)
						if(res.data.code ===200){
							_this.helpinfo = res.data.data.lists
							console.log("接收的",_this.helpinfo)
						}
					}
				})
			},
			 goToHelpDetail(item) {
			        uni.navigateTo({
			            url: `/pages/helpdetail/helpdetail?title=${encodeURIComponent(item.title)}&image=${encodeURIComponent(item.image)}&content=${encodeURIComponent(item.content)}`
			        });
			    }
		}
	}
</script>

<style scoped lang="scss">
	.layout {
		background: #f7f7f7;
		// min-height: 100vh;
		height: auto;
			.helpitem {
				background: #ffffff;
				width: 710rpx;
				height: 200rpx;
				// border: 1px solid red;
				margin: 16rpx 0 0 20rpx;
				display: flex;
				
				.helpbox {
					width: 150rpx;
					height: 150rpx;
					// border: 1px solid red;
					margin: 15rpx 0 0 15rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.help-mian {
					width: 500rpx;
					height: 160rpx;
					// border: 1px solid black;
					margin: 16rpx 0 0 20rpx;
					
					.helptitle {
						width: 400rpx;
						height: 50rpx;
						// border: 1px solid red;
						margin: 10rpx 0 0 5rpx;
						font-size: 35rpx;
						font-weight: 600;
						color: #333333;
						overflow: hidden;
						/* 隐藏超出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}
					
					.helpcontent {
						width: 480rpx;
						height: 90rpx;
						// border: 1px solid red;
						margin: 0 0 0 10rpx;
						font-size: 30rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
						 line-height: 45rpx;
						 max-height: 90rpx;
					}
				}
			}
	}
</style>